<script setup lang="ts">
import { onMounted, ref, render } from "vue"
// import { url } from "@/utils/canvas"
import { rpx, rpxh } from "@/utils/myTools";
import * as THREE from 'three'
import dat from "dat.gui"
// 坐标轴控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
//-----------------------------------------------------------创建场景
const scene = new THREE.Scene()
// -----------------------------------------------------------创建相机
const camera = new THREE.PerspectiveCamera(
  80,
  innerWidth / innerHeight,
  0.1,
  1000
)
camera.position.set(70, 70, 70)
camera.up.set(0, 1, 0);
camera.lookAt(0, 20, 20)
scene.add(camera)
// -----------------------------------------------------添加一个平面
const spherGeometrytwo = new THREE.PlaneGeometry(700, 700, 19, 19)
const materia = new THREE.MeshStandardMaterial({
  color: 'pink',
  side: THREE.DoubleSide,
  wireframe: true,
})
const plane = new THREE.Mesh(spherGeometrytwo, materia)
plane.position.set(0, -1, 0)
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane)
// ---------------------------------------------添加天空背景
const spherGeometry = new THREE.SphereGeometry(3, 160, 460)
const point = new THREE.PointsMaterial();
point.size = 0.3;
point.color.set("pink");
point.sizeAttenuation = true
// point.depthWrite = false 
point.blending = THREE.AdditiveBlending
point.vertexColors = true
// const textureLoader = new THREE.TextureLoader();
// const texture = textureLoader.load("./asstes/images/星星.png")
// point.map = texture
const particlesGeometry = new THREE.BufferGeometry();
const count = 5000;
// 设置缓冲区域
const position = new Float32Array(count * 3);
// 设置顶点
for (let i = 0; i < count * 3; i++) {
  position[i] = (Math.random() - 0.5) * 300;
}
particlesGeometry.setAttribute(
  "position",
  new THREE.BufferAttribute(position, 3)
)
const points = new THREE.Points(particlesGeometry, point)
scene.add(points)
// ---------------------------------------------添加灯光 去照亮标准材质
const light = new THREE.AmbientLight(0xffffff)
scene.add(light)
const SpotLight = new THREE.SpotLight(0xffffff, 1)
SpotLight.position.set(5, 5, 5);
SpotLight.castShadow = true
// 设置阴影贴图模糊度
SpotLight.intensity = 2
// SpotLight.color =
SpotLight.shadow.radius = 20;
SpotLight.shadow.mapSize.set(4049, 4049);
// SpotLight.target = sphere
SpotLight.distance = 0
SpotLight.penumbra = 0
SpotLight.angle = Math.PI / 6
SpotLight.decay = 0
scene.add(SpotLight)
// 鼠标的位置对象
// const mouse = new THREE.Vector2();
// window.addEventListener('mousemove', (event) => {
//   mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
//   mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
//   Raycaster.setFromCamera(mouse, camera);
//   let result=raycaster.intersectObjects(cubeArr)
// })
// ----------------------------------------------------------添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
const loader = new FBXLoader();
// ----------------------------------------------------------初始化渲染器
onMounted(() => {
  const div = document.querySelector('.di') as HTMLSpanElement;
  const span = document.querySelector('span') as HTMLSpanElement;;
  span.innerHTML = '电子围栏'
  loader.load('/pidaiji.fbx', (res: any) => {
    res.scale.set(0.03, 0.03, 0.03); // 缩小模型到原来的一半大小
    // res.position.set(-10, -50, 0)
    console.log('item', res)
    scene.add(res);
  })
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  renderer.shadowMap.enabled = true;
  renderer.setSize(innerWidth, innerHeight)
  div.appendChild(renderer.domElement)
  // -------------------------------------------------------创建轨道控制器查看物体
  const controls = new OrbitControls(camera, renderer.domElement)
  // 设置控制器  让控制器更加有真实效果 必须在动画循环里面调用updata方法
  controls.enableDamping = true
  function render() {
    // let time = 0
    // let t = (time / 1000) % 5
    // cube.position.x = t * 1
    // cube.position.x += 0.01
    // if (cube.position.x > 5) cube.position.x = 0
    // cube.rotation.x += 0.01
    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }
  render()

  window.addEventListener('resize', () => {
    // 更新摄像头
    camera.scpect = innerWidth / innerHeight
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix()
    //更新渲染气的大小
    renderer.setSize(innerWidth, innerHeight)
    renderer.setPixelRatio(window.devicePixelRatio)
  })
  // 双击进入全屏
  window.addEventListener('dblclick', () => {
    const fullScreenElement = document.fullscreenElement
    console.log(fullScreenElement)
    console.log(document.fullscreenElement)
    if (!fullScreenElement) {
      renderer.domElement.requestFullscreen()
    } else {
      document.exitFullscreen()
    }
  })

})
</script>
<template>
  <div class="bg flex relative">
    <div class="absolute left-10 top-40 left">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <div class="div">
      <div class="di">
        <span></span>
      </div>
    </div>
    <div class="right absolute right-10 top-40">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>



</template>
<style scoped lang="scss">
@import "@/assets/main.scss";

.di {
  position: relative;

  span {
    width: rpx(200);
    height: rpxh(50);
    display: flex;
    border: 1px solid blue;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    left: rpx(1000);
    top: rpxh(300)
  }
}

.img {
  font-size: 30px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  background-image: url("@/assets/images/13.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: rpxh(50);
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // z-index: 999;
}

.flex {
  display: flex;
  width: 100%;
  height: 100vh;

  .left {
    width: rpx(500);
    height: 100vh;

    div {
      background-image: url("@/assets/images/border-lt.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: rpxh(300);
      margin-top: rpxh(30);
      // padding: rpxh(90) rpx(30) 0;
    }
  }

  .center {
    flex: 1;

    div {
      background-image: url("@/assets/images/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .right {
    width: rpx(500);
    height: 100vh;

    div {
      background-image: url("@/assets/images/border-lt.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: rpxh(300);
      // padding: rpxh(90) rpx(30) 0;
      margin-top: rpxh(30);
    }
  }
}
</style>
